<!DOCTYPE html>
<style>
table {
  border-collapse: separate;
}
#cell {
  width: 200px;
  height: 24px;
  border: 1px solid red;
  vertical-align: baseline;
}
#input {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}
</style>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<script>
if (window.testRunner)
  testRunner.waitUntilDone();

runAfterLayoutAndPaint(function() {
  var cell = document.getElementById('cell');
  var input = document.getElementById('input');
  // Baseline of the table cell will change when the input is set a text.
  input.value = 'abc';
  runAfterLayoutAndPaint(function() {
    cell.style.borderColor = 'green';
    runAfterLayoutAndPaint(function() {
      if (window.testRunner)
        testRunner.notifyDone();
    });
  });
});
</script>
Tests layout and painting of table cell after baseline and border changes.
<table>
  <tr>
    <td id="cell">
      <input id="input">
    </td>
  </tr>
</table>
